/*
  学习目标：props两大特点
  1. 可以传递任意数据类型: 函数 和 JSX
  2. 🔔props是只读的，不允许修改props的数据  -  单向数据流
  
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          name="ls"
          // 数组
          list={[1, 2, 3]}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { name, list } = this.props;

    return (
      <div>
        Child - {name}
        <h1>{list}</h1>
        <button
          onClick={() => {
            // this.props.name = '张三 - 狂徒';
            // 下方代码无效, 💥 无法像vue一样,通过引用地址绕过单向数据流
            this.props.list.push(4);
          }}
        >
          点我
        </button>
      </div>
    );
  }
}
